<template>
    <el-dialog
        :title="titleMap[state.mode]"
        v-model="state.visible"
        :width="500"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="form"
            :rules="rules"
            :disabled="state.mode == 'show'"
            ref="dialogFormRef"
            label-width="100px"
        >
            <el-form-item :label="$t('排序值')" prop="sort">
                <el-input
                    v-model="form.sort"
                    :placeholder="$t('数值越大越靠前')"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('语言名称')" prop="langName">
                <el-input v-model="form.langName" placeholder="如：中文" clearable></el-input>
            </el-form-item>
            <el-form-item :label="$t('语言标示')" prop="langFlag">
                <el-input v-model="form.langFlag" placeholder="如：zh-CN" clearable></el-input>
            </el-form-item>
            <el-form-item :label="$t('开启状态')" prop="status">
                <el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item :label="$t('是否默认')" prop="isDefault">
                <el-switch v-model="form.isDefault" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="state.visible = false">{{ $t('取消') }}</el-button>
            <el-button
                v-if="state.mode != 'show'"
                type="primary"
                :loading="state.isSaving"
                @click="submit()"
                >{{ $t('保存') }}
            </el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import type { LangListModel, TitleMapModel } from '@/views/maintenance/langSetting/langList/type.ts'
import maintenance from '@/api/modules/maintenance.ts'
import feedback from '@/utils/feedback.ts'
const { t } = useI18n()

const dialogFormRef = ref()

const emit = defineEmits(['success', 'closed'])

const titleMap = reactive<TitleMapModel>({
    add: t('新增'),
    edit: t('编辑'),
    show: t('查看')
})

const form = reactive({
    id: '',
    langName: '',
    langFlag: '',
    status: '1',
    isDelete: 0,
    sort: 1,
    isDefault: 0
})

const rules = reactive({
    langName: [{ required: true, message: '请输入语言名称' }],
    langFlag: [{ required: true, message: '请输入语言标识' }]
})

const state = reactive({
    mode: 'add',
    visible: false,
    isSaving: false,
    groups: [],
    groupsProps: {
        value: 'id',
        emitPath: false,
        checkStrictly: true
    }
})

defineExpose({
    open,
    setData
})

// 显示
function open(mode = 'add') {
    state.mode = mode
    state.visible = true
}

// 表单提交方法
async function submit() {
    await dialogFormRef.value!.validate()

    state.isSaving = true
    const res = await maintenance.lang.edit.post(form, { await: 1 })
    state.isSaving = false
    if (res) {
        if (state.mode == 'add') {
            form.id = res
        }
        emit('success', form, state.mode)
        state.visible = false
        feedback.success(t('操作成功'))
    }
}

// 表单注入数据
function setData(data: LangListModel) {
    Object.assign(form, data)
}
</script>

<style></style>
